<script lang="ts" setup>
import { ref } from "vue";

interface ChatItemProps {
  message?: string;
  messageId?: string;
  playing?: number;
  voiceTime?: number;
  voiceUrl?: string;
  isload?: boolean;
  isLast?: boolean;
  hasCursor?: boolean;
  showCopy?: boolean;
  bgColor?: string;
  color?: string;
}
defineProps<ChatItemProps>();

const emit = defineEmits(["sendMessage"]);

const prologueItems = ref([
  "1️⃣亲亲😘是要购买产品吗❓",
  "2️⃣🉑成为合伙人👩🏻‍❤️‍💋‍👩🏻线上卖情趣用品哦✨✨",
  "3️⃣快快加盟开线下情趣体验馆吧🌈线上线下双重收益🌈"
]);

const onSendMessage = (text: string) => {
  emit("sendMessage", text);
};
</script>
<template>
  <view class="bubble robot-bubble">
    <view class="content">
      <view class="text" :style="{ background: bgColor }">
        你好，我是智能Ai导购妍馨🧏🏻‍♀️请回复以下问题：
        <view
          v-for="(item, index) in prologueItems"
          class="item"
          :key="index"
          @click="onSendMessage(item)"
          >{{ item }}</view
        >
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.text {
  padding: 16px;
  border-radius: 10px;
  border-top-left-radius: 0;
  background-color: var(--bg-robot-bubble);
  .item {
    margin-top: 10px;
    text-decoration: underline;
    color: #495bff;
  }
}
.export {
  text-align: right;
}
.bubble {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20rpx;
  .content {
    color: #17181c;
    font-size: 14px;
    box-sizing: border-box;
    word-wrap: break-word;
    max-width: 100%;
    text-align: justify;
    position: relative;
  }
}
</style>
